<template>
	<view>
		<view class="all-body">
			<view class="information">
				<view class="name">
					<text class="name-style">{{userInfo.name}}</text>
				</view>
				<view class="age-sex-nation">
					<text class="ASN-style">{{userInfo.age}}岁，</text>
					<text class="ASN-style" v-if="userInfo.sex===1">男，</text>
					<text class="ASN-style" v-else>女，</text>
					<text class="ASN-style">{{userInfo.ethnic}}</text>
				</view>
				<view class="info">
					<view class="info-body">
						<view class="info-left">
							<text class="left">职业：</text>
						</view>
						<view class="info-right">
							<text class="right">{{userInfo.vocation}}</text>
						</view>
					</view>
					<view class="info-body">
						<view class="info-left">
							<text class="left">电话号码：</text>
						</view>
						<view class="info-right">
							<text class="right">{{userInfo.phone}}</text>
						</view>
					</view>
					<view class="info-body">
						<view class="info-left">
							<text class="left">家庭住址：</text>
						</view>
						<view class="info-right">
							<text class="right">{{userInfo.homeAddress}}</text>
						</view>
					</view>
					<view class="info-body">
						<view class="info-left">
							<text class="left">公司地址：</text>
						</view>
						<view class="info-right">
							<text class="right">{{userInfo.comAddress}}</text>
						</view>
					</view>
					<view class="info-body">
						<view class="info-left">
							<text class="left">身份证号：</text>
						</view>
						<view class="info-right">
							<text class="right">{{userInfo.idCard}}</text>
						</view>
					</view>

				</view>
			</view>
			<view class="skills">
				<u-collapse>
					<u-collapse-item title-border="none" border="false" title="特长技能"
						style="font-size: 16px;font-weight: 600;">
						<view class="skill-tab">
							<view class="tab" v-for="(item,index) in userInfo.speciality" :key="index">
								<!-- <text class="tab-text">{{item.name}}</text> -->
								<text class="tab-text">{{item.name}}</text>
							</view>
						</view>
					</u-collapse-item>
				</u-collapse>
			</view>
			<view class="ceritfys">
				<u-collapse>
					<u-collapse-item title="证书">
						<view>
							<u-swiper :list="userInfo.certify" :height="200" imgMode="aspectFill" keyName="imageUrl"
								:autoplay="false" circular></u-swiper>
						</view>
					</u-collapse-item>
				</u-collapse>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//记录当前用户选择的定位
				userInfo: '',
				//用户头像
				avatarUrl: '',
            };
		},
		methods: {
			//选择家庭住址
			//根据志愿者id 查询志愿者详细详细
			getUserDetail(id) {
				console.log(id)
				this.$request({
					 url: `${this.$baseUrl}/users/UDetail/${id}`
					//url: `${this.$baseUrl}/users/detail/${id}`
				}).then(res => {
					console.log(res)
					this.userInfo = res.data.data
					this.avatarUrl = uni.getStorageSync("userInfo").avatarUrl;
					this.form = this.userInfo
					console.log(this.userInfo)
				}).catch(res => {
					console.log(res)
				})
			},

		},

		onLoad(e) {
			//获取用户信息
			this.getUserDetail(e.id);
		},
	}
</script>

<style lang="scss">
	.all-body {
		position: relative;
		height: 1624rpx;
		width: 750rpx;
		overflow: hidden;
		opacity: 1;
		background-color: rgba(245, 245, 245, 1);

		.information {
			overflow: hidden;
			background-color: rgba(255, 255, 255, 1);
			width: 686rpx;
			min-height: 440rpx;
			margin-top: 32rpx;
			margin-left: 32rpx;
			box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 16rpx;

			.avatar {
				position: absolute;
				background: rgba(245, 245, 245, 1);
				margin-top: 32rpx;
				margin-left: 32rpx;
				border-radius: 100%;
				border: 4rpx solid #ffffff;
				height: 96rpx;
				width: 96rpx;
				// transform: translate(0, -50%);
			}

			.name {
				position: absolute;
				margin-top: 38rpx;
				margin-left: 152rpx;
				height: 46rpx;

				.name-style {
					font-size: 32rpx;
					font-weight: 600;
					letter-spacing: 0rpx;
					color: rgba(51, 51, 51, 1);
					text-align: left;
					vertical-align: top;
				}
			}

			.age-sex-nation {
				position: absolute;
				margin-top: 88rpx;
				margin-left: 152rpx;
				min-width: 174rpx;
				height: 34rpx;

				.ASN-style {
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					color: rgba(153, 153, 153, 1);
					text-align: left;
					vertical-align: top;
				}
			}

			.edit {
				position: absolute;
				margin-top: 52rpx;
				margin-left: 598rpx;
				width: 56rpx;
				height: 56rpx;
			}

			.info {
				width: 686;
				margin-top: 160rpx;
				margin-bottom: 32rpx;
				padding-left: 32rpx;
				padding-right: 32rpx;

				.info-body {
					display: flex;
					width: 622rpx;
					min-height: 40rpx;
					margin-top: 16rpx;

					.info-right {
						width: 482rpx;

						.right {
							font-size: 28rpx;
							font-weight: 600;
							letter-spacing: 0rpx;
							line-height: 40rpx;
							color: rgba(51, 51, 51, 1);
							text-align: left;
							vertical-align: top;
						}
					}

					.info-left {
						width: 140rpx;

						.left {
							font-size: 28rpx;
							font-weight: 400;
							letter-spacing: 0rpx;
							line-height: 40rpx;
							color: rgba(102, 102, 102, 1);
							text-align: left;
							vertical-align: top;
						}
					}
				}
			}
		}

		.skills {
			background-color: rgba(255, 255, 255, 1);
			width: 686rpx;
			min-height: 56rpx;
			margin-top: 32rpx;
			margin-left: 32rpx;
			box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 16rpx;

			.skill-tab {
				width: 622rpx;
				min-height: 56rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-items: flex-start;

				.tab {
					border-radius: 28rpx;
					margin-left: 16rpx;
					margin-bottom: 16rpx;
					background: rgba(90, 221, 158, 1);
					padding: 4px 12px 4px 12px;

					.tab-text {
						height: 40rpx;
						opacity: 1;
						display: flex;
						font-size: 28rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 40rpx;
						color: rgba(255, 255, 255, 1);
						text-align: left;
					}
				}
			}
		}

		.ceritfys {
			background-color: rgba(255, 255, 255, 1);
			width: 686rpx;
			min-height: 56rpx;
			margin-top: 32rpx;
			margin-left: 32rpx;
			box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 16rpx;
		}
	}

	.form {
		padding: 40rpx;

		.message {
			color: red;
			font-size: 26rpx;
		}

		.picker {
			border: 2rpx #D4D4D4 solid;
			height: 60rpx;
			border-radius: 10rpx;
			line-height: 60rpx;
			padding: 15rpx;
		}

		.speciality-box {
			margin-top: 10rpx;
			background-color: #f3f3f4;
			border: 2rpx solid #d0d0d1;
			padding: 15rpx;

			.speciality-box-item {
				background-color: #FFFFFF;
				padding: 15rpx;
				border: 2rpx solid #ddddde;
				margin-top: 30rpx;

				.specialityType-box {
					background-color: #FFFFFF;
					width: 60%;
					border: 2rpx solid #c4c5b6;

					.specialityType-box-item {
						padding: 15rpx;
						margin: 10rpx;
					}

					.specialityType-box-item:hover {
						color: #3C9CFF;
					}
				}

				.input {
					margin-bottom: 15rpx;
				}
			}
		}

		//证书
		.certify-box {
			margin-top: 20rpx;

			.certify-box-item {
				border: 2rpx solid #e1e2e3;
				padding: 20rpx;

				.certifyType-box {
					.certifyType-box-item {
						padding: 15rpx;
						margin: 10rpx;
					}

					.specialityType-box-item:hover {
						color: #3C9CFF;
					}
				}

				.input {
					margin-bottom: 15rpx;
				}
			}
		}

	}
</style>
